<template>
	<view class="container">
		<trans-custom bgColor="243,73,48" :isBack="true" :opacity="opacity" :iconOpcity="iconOpcity">
			<block slot="content">{{navTitle}}</block>
			<!-- #ifdef APP-PLUS -->
			<!-- <block slot="right"><text class="lg text-white cuIcon-share share-heade navBack" :style="[{fontSize: 28+'rpx'},{background:'rgba(0,0,0,'+iconOpcity+')'}]"
				 @click="share"></text></block> -->
			<!-- #endif -->
		</trans-custom>
		<view class="swiper-content">
			<swiper autoplay="true" interval="4000" duration="500" indicator-dot='true' @change="swiperChange" circular="true"
			 v-if="shopInfo.photos && shopInfo.photos.length>0">
				<block v-for="(item,index) in shopInfo.photos" :key="index">
					<swiper-item>
						<image :src="item" mode='' class="slide-image" />
					</swiper-item>
				</block>
			</swiper>
			<view class="poress">
				<text>{{swiperIndex}}</text><text>/ {{shopInfo.photos.length}}</text>
			</view>
		</view>
		<view class="shop-info">
			<view class="top-sahre-info">
				<view class="name text-cut" style="max-width: 550rpx;">{{shopInfo.name}}</view>
				<view class="tags">
					<uni-tag v-for="(tag,i) in shopInfo.tags" :key="i" inverted="true" :text="tag" size="small" :type="colorList[i]"></uni-tag>
				</view>
				<view class="time" @click="goInfo" data-adress="0" v-if="shopInfo.start_time && shopInfo.end_time">
					开放时间:{{shopInfo.start_time}}~{{shopInfo.end_time}}&nbsp;|&nbsp;购票须知
				</view>
				<view class="des text-cut">
					{{shopInfo.summary?shopInfo.summary:shopInfo.name}}
				</view>
				<view class="division"></view>
				<view class="bottom">
					<view class="left">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/daohang.png" mode=""></image>
					</view>
					<view class="text">
						{{shopInfo.city}}{{shopInfo.district}}{{shopInfo.address}}
					</view>
					<view class="right" @click="openLocation">
						<text>去导航</text>
						<tui-icon :name="'arrowright'" :size="'20'" :color="'#999'"></tui-icon>
					</view>
				</view>

				<view class="share-right" @click="showShare">
					<text class="lg cuIcon-share"></text>
				</view>
			</view>
		</view>

		<view class="cu-bar bg-white" v-if="needShareGoods.length>0">
			<view class="action">
				<text class="text-xl text-bold text-black">邀好友赚奖励</text>
			</view>
			<view class="" style="padding-right: 24rpx;font-size: 24rpx;color: #999;" @click="goCentre">
				查看更多
			</view>
		</view>
		<view class="concentration" v-if="needShareGoods.length>0">
			<view class="banner-content" v-if="needShareGoods.length>0">
				<scroll-view scroll-x scroll-with-animation="true">
					<view class="swiper-container">
						<view class='swiper-item' v-for="(item,index) in needShareGoods" :key="index">
							<view class="coon">
								<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
								<view class="text-cut">
									{{item.product_name}}
								</view>
								<view class="">
									<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
									<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
									<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
									<text class="text-colorP" v-if="item.integral>0">积分</text>
								</view>
								<view class="" @tap.stop="showModal(item.id)">
									邀好友购买赚{{item.max_money}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="cu-bar bg-white" v-if="shopInfo.recommend_article.length>0">
			<view class="action">
				<!-- <text class="cuIcon-titles text-black"></text> -->
				<text class="text-xl text-bold text-black">游玩推荐</text>
			</view>
		</view>
		<view class="photos" v-if="shopInfo.recommend_article.length>0">
			<scroll-view class="bookshelf-content-photo" scroll-x="true">
				<block v-for="(item,index) in shopInfo.recommend_article" :key="index">
					<view class="photo-img">
						<image :src="item.src" mode=""></image>
						<view class="">
							{{item.title}}
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="cu-bar bg-white" v-if="shopInfo.product.length>0">
			<view class="action">
				<!-- <text class="cuIcon-titles text-black"></text> -->
				<text class="text-xl text-bold text-black">门票</text>
			</view>
		</view>
		<view class="ticket-content" v-if="shopInfo.product.length>0">
			<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
				 :data-current="index" @tap.stop="swichNav">{{item}}</view>
			</scroll-view>
			<view class="division" style="margin: 20rpx auto 0; width: 700rpx;"></view>
			<swiper class="tab-content" :current="currentTab" duration="300" @change="switchTab" :style="{height:winHeight+'px'}">
				<swiper-item v-for="(item,index) in tabbar" :key="index">
					<scroll-view scroll-y class="scoll-y">
						<view class="product-item" v-for="(jtem,i) in shopInfo.product" :key="i">
							<image :src="jtem.image+'?x-oss-process=image/resize,m_fill,h_150,w_200'" mode=""></image>
							<view class="p_left">
								<view class="">{{jtem.product_name}}</view>
								<view class="p_tags"></view>
								<view class="">
									<view v-if="jtem.sales>0">已售&nbsp;{{jtem.sales}}+</view>
									<view v-if="jtem.sales>0"></view>
									<view style="color:#0099ff" :data-id="jtem.id" @click='getNowData'>购买须知<tui-icon :name="'arrowright'" :size="'15'"
										 :color="'#0099ff'"></tui-icon>
									</view>
								</view>
							</view>
							<view class="p_right">
								<view>
									<text class="text-price text-colorP" v-if="jtem.price>0">{{jtem.price}}</text>
									<text class="text-colorP" v-if="jtem.integral>0 && jtem.price>0">+</text>
									<text class="text-colorP" v-if="jtem.integral>0">{{jtem.integral}}</text>
									<text class="text-colorP" v-if="jtem.integral>0">积分</text>
								</view>
								<view class="bg-gradual-colorP" @click="noExploit(jtem.id)">购买</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 景点信息 -->
		<view class="cu-bar bg-white look-all">
			<view class="action">
				<text class="text-xl text-bold text-black">景点信息</text>
			</view>
			<view class="" @click="goInfo" data-adress="1">
				查看全部
			</view>
		</view>
		<view class="other-all">
			<view class="other-item" v-if="shopInfo.tips.value.tips_best_time">
				<view class="text-cut">
					{{shopInfo.tips.value.tips_best_time.name}}
				</view>
				<view class="text-cut">
					{{shopInfo.tips.value.tips_best_time.value}}
				</view>
			</view>
			<view class="other-item" v-if="shopInfo.tips.value.tips_play_time">
				<view>
					{{shopInfo.tips.value.tips_play_time.name}}
				</view>
				<view class="text-cut">
					{{shopInfo.tips.value.tips_play_time.value}}
				</view>
			</view>
			<view class="other-item">
				<view>
					地理位置
				</view>
				<view class="text-cut">
					{{shopInfo.province}}{{shopInfo.city}}{{shopInfo.district}}{{shopInfo.address}}
				</view>
			</view>
		</view>
		<tui-divider width="60%" :gradual="true">到底啦，去其他地方看看</tui-divider>

		<view class="notice-layer" v-if="noticeShow" @click='close'></view>
		<view class="notice-content" :style='noticeShow?"bottom: 0":"bottom: -70%"'>
			<image class="close" @click='close' src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/tour-close.png"></image>
			<view class="content">
				<view class="tickets-msg">
					<image class='head-img' :src="nowData.image+'?x-oss-process=image/resize,m_fill,h_140,w_160'"></image>
					<view class="msg">
						<text>{{nowData.product_name}}</text>
						<text>已售 {{nowData.sales}}</text>
					</view>
				</view>
				<view class="tourism-in" v-for="(item,index) in nowData.notes_all" :key="index" v-if="item">
					<view class="tick-tit">{{item.name}}</view>
					<view class="tourism-text" v-for="(keyValue,i) in item.value" :key="i">
						<view class="label">{{keyValue.name}}</view>
						<view class="text">{{keyValue.value?keyValue.value:'暂无备注'}}</view>
					</view>
				</view>
			</view>
			<view class="use-btn">
				<view>
					<text class="text-price text-colorP" v-if="nowData.price>0">{{nowData.price}}</text>
					<text class="text-colorP" v-if="nowData.integral>0 && nowData.price>0">+</text>
					<text class="text-colorP" v-if="nowData.integral>0">{{nowData.integral}}</text>
					<text class="text-colorP" v-if="nowData.integral>0">积分</text>
				</view>
				<view @click='noExploit(nowData.id)'>立即购买</view>
			</view>
			<!-- 分享商家 -->
			<m-share :windowSize="windowSize" :animationLayer="animationLayer" :animationContent="animationContent" :shareShow="shareShow"
			 @hideShare="hideShare" :shareType="'shops'" :shopsInfo="shopInfo"></m-share>
		</view>
		<!-- H5引导分享 -->
		<view class="h5-share" v-if="hShare" @click="hidehShare">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/sharingTipsImg.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import uniTag from "./component/uni-tag.vue";
	import tuiIcon from "@/components/thorUI/icon.vue";
	import tuiDivider from "./component/divider.vue"
	import mShare from "./component/m-share.vue";
	import tuiModal from "@/components/thorUI/modal.vue"
	import {
		promisify
	} from '@/utils/promise.util'
	import {
		expis_this_an_array,
		formatDate,
		formatDateTime
	} from '@/common/utils.js'
	export default {
		components: {
			uniTag,
			tuiIcon,
			tuiDivider,
			mShare,
			tuiModal
		},
		data() {
			return {
				colorList: ['success', 'primary', 'warning', 'error'],
				navTitle: '景区详情',
				opacity: 0,
				iconOpcity: 0.5,
				scrollH: 0,
				shopInfo: {},
				swiperIndex: 1,
				// 分享资源
				animationLayer: {},
				animationContent: {},
				windowSize: {},
				shareShow: false,
				business_id: '',
				// 测试数据
				tabbar: ['常规票'],
				winHeight: "0", //窗口高度
				currentTab: 0, //预设当前项的值
				scrollLeft: 0, //tab标题的滚动条位置
				noticeShow: false,
				nowData: {},

				// 分销
				goodsInfo: {
					price: '',
					integral: '',
					product_name: '',
				},
				// 海报数据
				c_qr: '',
				c_bg: '',
				c_shop: '',
				canvasShow: false,
				shareImg: '',
				isShare: false,
				needShareGoods: [],
				// 新加字段
				c_fx: '',
				c_kj: '',
				c_xin: '',
				c_shopImage: '',
				modalShow: false,
				thisProId: '',
				button: [{
					text: "分享好友",
					type: 'green',
					plain: true,
					openType: true
				}, {
					text: "生成海报",
					plain: true
				}],
				shareScene: '',
				hShare: false,
				yajin:''
			}
		},
		onLoad(options) {
			// options.scene = 1
			// #ifdef H5
			var href = window.location.href
			if (href.indexOf('code') > -1) {
				var zIndex = window.location.href.slice(window.location.href.indexOf('?'), window.location.href.indexOf('#'))
				window.location.href = window.location.href.split(zIndex).join('')
			}
			// #endif

			if (options.scene) {
				this.business_id = options.scene
			} else {
				this.business_id = options.busId
			}
			
			// 存在押金卡（押金卡id）
			if(options.yajin){
				this.yajin = options.yajin
			}
			
			this.getDetailNew()
			this.getNeedShare()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
					this.windowSize = res
				}
			})
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / (this.scrollH / 4);
			if (this.opacity >= 1 && opcity >= 1) {
				return;
			}
			this.opacity = opcity;
			// this.iconOpcity = 0.5 * (opcity < 0 ? 0 : 1 - opcity)
			var thisOpcity = this.opacity < 0 ? 0 : 1
			this.iconOpcity = 0.5 * (thisOpcity - this.opacity)
		},
		onShareAppMessage(res) {
			var titleText = ''
			var path = ''
			var imageUrl = ''
			var that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				if (res.target.dataset.name == "proShare") {
					var thisProId = that.thisProId
					var shareScene = that.shareScene
					titleText = '我发现一个好东西,快来看看~'
					path = '/pages/shopsGoodShare?scene=' + shareScene
					that.needShareGoods.map(item => {
						if (item.id == thisProId) {
							imageUrl = item.image
						}
					})
				} else {
					titleText = '我发现了一家好店,快来看看~'
					path = '/pages/scenicDetail?busId=' + this.business_id
					imageUrl = this.shopInfo.shop_image
				}
			}


			return {
				title: titleText,
				path: path,
				imageUrl: imageUrl,
				success: (res) => {
					console.log("转发成功", res);
				},
				fail: (res) => {
					console.log("转发失败", res);
				}
			}
		},
		methods: {
			hidehShare() {
				this.hShare = false
			},
			goCentre() {
				uni.navigateTo({
					url: '/pages/distributionCentre?busId='+ this.business_id
				})
			},
			showModal(id) {
				uni.navigateTo({
					url: `/pages/shopsGoodShare?scene=${id}`
				})
			},
			moveHandle() {},
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			getNeedShare() {
				var that = this;
				this.$request({
					url: '/product/get_distribution_product',
					data: {
						business_id: that.business_id
					},
					success: res => {
						if (res.data.status == 1) {
							that.needShareGoods = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 显示分享DOM
			showShare() {
				var that = this
				// #ifdef H5
				that.hShare = true
				return
				// #endif
				that.shareShow = true
				var animationL = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				})
				animationL.opacity(1).step()
				that.animationLayer = animationL.export()
				setTimeout(function() {
					var animationC = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					animationC.bottom(0).step()
					that.animationContent = animationC.export()
				}.bind(that), 200)
			},
			// 隐藏分享DOM
			hideShare() {
				var that = this
				var animationC = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animationC.bottom('-270rpx').step()
				that.animationContent = animationC.export()
				setTimeout(function() {
					var animationL = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					animationL.opacity(0).step()
					that.animationLayer = animationL.export()
					that.shareShow = false
				}.bind(that), 500)
			},
			// 敬请期待
			noExploit(id) {
				// #ifdef H5
				if (!uni.getStorageSync('auth_token')) {
					let curUrl = `/${this.curUrlWithArgs()}?busId=${this.business_id}`
					if (this.orderId) {
						curUrl += `&orderId=${this.orderId}`
					}
					if(this.yajin){
						curUrl += `&yajin=${this.yajin}`
					}
					curUrl = encodeURIComponent(curUrl)
					uni.redirectTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				// #endif
				var that = this
				// var id = e.currentTarget.dataset.id;
				var resultProducts = that.shopInfo.product.filter(item => item.id == id)
				var needData = {}
				needData['shopInfo'] = {
					shopName: that.shopInfo.name,
					shopId: that.shopInfo.id,
					shopImg: that.shopInfo.shop_image
				}
				needData['productList'] = []
				needData['productList'].push({
					goodsName: resultProducts[0].product_name,
					goodsImg: resultProducts[0].image,
					id: resultProducts[0].id,
					integral: resultProducts[0].integral ? resultProducts[0].integral : 0,
					shopPrice: resultProducts[0].price,
					saleNums: 1
				})
				uni.setStorageSync('needData', needData)
				if (resultProducts[0].product_type == 3) {
					uni.navigateTo({
						url: "/pages/confirmOrder?from=offline&isCash=1"
					})
				} else {
					uni.navigateTo({
						url: "/pages/confirmOrder?from=offline"
					})
				}
			},
			// 打开票圈须知
			getNowData(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				var info = that.shopInfo.product.filter(item => item.id == id)
				that.nowData = info[0]
				that.noticeShow = true
			},
			// 关闭票圈notice
			close() {
				this.noticeShow = false
			},
			// 查看详情
			goInfo(e) {
				var that = this
				uni.navigateTo({
					url: '/pages/scenicInfo?adress=' + e.currentTarget.dataset.adress + '&busId=' + that.business_id
				})
			},
			// 打开地图
			openLocation() {
				var shopInfo = this.shopInfo
				uni.openLocation({
					latitude: shopInfo.latitude,
					longitude: shopInfo.longitude,
					name: shopInfo.name,
					address: shopInfo.address,
					scale: 18
				})
			},
			// 滚动切换标签样式
			switchTab: function(e) {
				let that = this;
				this.currentTab = e.detail.current;
				this.checkCor();
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 3) {
					//这里距离按实际计算
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			// 吊起分享
			share() {
				uni.showToast({
					title: '吊起分享'
				})
			},
			getDetailNew() {
				var that = this
				this.$request({
					url: '/Shop/getTravelShopDetail',
					data: {
						business_id: that.business_id
					},
					success: res => {
						if (res.data.status == 1) {
							var result = res.data.data
							that.navTitle = result.name
							if (result.tips.value && result.tips.value.tips_best_time) {
								result.tips.value.tips_best_time.name = result.tips.value.tips_best_time.name.indexOf('最佳') > -1 ? result.tips
									.value.tips_best_time.name.substr(2, 5) : result.tips.value.tips_best_time.name
							}
							if (result.tags.length == 0) {
								result.tags.push('景区')
							}
							if (result.photos.length == 0) {
								result.photos.push(result.shop_image)
							}
							that.shopInfo = result
							that.winHeight = result.product.length * 100
							// 如果是直购押金卡的
							if(that.yajin){
								that.noExploit(that.yajin)
							}
							// #ifdef H5
							that.wxConfig()
							// #endif
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},

			/**配置jsApi**/
			wxConfig() {
				var that = this
				let system = uni.getSystemInfoSync(); // 获取系统信息
				var url = ''
				if (system.platform === 'android') { // 判断平台
					url = window.location.href
				} else {
					if (window.location.href.indexOf('#')) {
						url = window.location.href.split('#')[0]
					} else {
						url = window.location.href.split('//')[0]
					}
				}
				this.$request({
					url: '/JsTicket/getSignPackage',
					data: {
						'url': url,
					},
					success: res => {
						var result = res.data.data
						that.$wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: result.appId, // 必填，公众号的唯一标识
							timestamp: result.timestamp, // 必填，生成签名的时间戳
							nonceStr: result.nonceStr, // 必填，生成签名的随机串
							signature: result.signature, // 必填，签名
							jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo",
								"onMenuShareQZone"
							] // 必填，需要使用的JS接口列表
						});
						var title = that.shopInfo.name
						var desc = that.shopInfo.summary
						var thisUrl = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' +
							encodeURIComponent(window.location.href);
						var imgurl = that.shopInfo.shop_image
						that.$wx.ready(function() {
							//获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareQQ({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareAppMessage({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareTimeline({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
							that.$wx.onMenuShareWeibo({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareQZone({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});
						})
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current + 1
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}


	canvas {
		position: absolute;
		top: -999999rpx;
		left: 0;
		/* top: -180rpx;
		left: 0; */
	}

	.swiper-content {
		width: 100%;
		height: 440rpx;
		position: relative;
	}

	.poress {
		position: absolute;
		right: 24rpx;
		bottom: 57rpx;
		padding: 0 20rpx;
		height: 42rpx;
		display: flex;
		align-items: center;
		color: #cdcdcd;
		background: rgba(0, 0, 0, .5);
		border-radius: 40rpx;
	}

	.poress>text {
		color: #cdcdcd;
		font-size: 22rpx;
	}

	.poress>text:nth-child(1) {
		font-size: 24rpx;
		font-weight: bold;
		padding-right: 10rpx;
	}

	.slide-image,
	swiper {
		width: 100%;
		height: 100%;
	}

	.shop-info {
		width: 100%;
		height: 340rpx;
		position: relative;
	}

	.share-right {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}

	.share-right text {
		color: #f8990b;
		font-size: 48rpx;
	}

	.shop-info .top-sahre-info {
		width: 702rpx;
		height: 355rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 12rpx 1rpx rgba(0, 13, 22, 0.2);
		border-radius: 8rpx;
		position: absolute;
		left: 50%;
		top: -37rpx;
		margin-left: -351rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	}

	.shop-info .top-sahre-info .name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
		display: flex;
		flex-direction: column;
	}

	.shop-info .top-sahre-info .tags {
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.shop-info .tags uni-tag {
		margin-right: 20rpx;
	}

	.shop-info .tags uni-tag:last-child {
		margin-right: 0;
	}

	.shop-info .top-sahre-info .time {
		color: #0099ff;
		font-size: 26rpx;
	}

	.shop-info .top-sahre-info .des {
		color: #999999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.division {
		border-top: solid 1rpx #efefef;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.shop-info .top-sahre-info .bottom {
		flex: 1;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-info .top-sahre-info .bottom .left {
		width: 60rpx;
		display: flex;
		/* justify-content: center; */
		align-items: center;
	}

	.shop-info .top-sahre-info .bottom .left image {
		width: 30rpx;
		height: 30rpx;
	}

	.shop-info .top-sahre-info .bottom .text {
		flex: 1;
		font-size: 26rpx;
		color: #333333;
		line-height: 35rpx;
	}

	.shop-info .top-sahre-info .bottom .right {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 24rpx;
		line-height: 40rpx;
	}


	.bookshelf-content-photo {
		/* // 滚动必须加的属性 */
		white-space: nowrap;
		width: 100%;
	}

	.photos {
		width: 100%;
		background: rgba(0, 0, 0, 0);
	}

	.photos .photo-img:nth-child(1) {
		margin-left: 24rpx;
	}

	.photos .photo-img {
		width: 220rpx;
		height: 220rpx;
		display: inline-block;
		vertical-align: top;
		margin-right: 24rpx;
		border-radius: 4rpx;
	}

	.photos .photo-img image {
		width: 240rpx;
		height: 160rpx;
		display: inline-block;
		float: left;
		border-radius: 4rpx;
	}

	.photos .photo-img view {
		flex: 1;
		width: 100%;
		height: 60rpx;
		float: left;
		line-height: 60rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1rpx;
		font-size: 26rpx;
		color: #333;
		border-radius: 0 0 4rpx 4rpx;
	}

	.ticket-content {
		width: 100%;
		overflow: hidden
	}

	.tab-content {
		/* min-height: 610rpx; */
		border-bottom: solid 1rpx #efefef;
	}


	/*tabbar start*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view::before {
		content: '';
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tab-view {
		width: 100%;
		height: 50upx;
		overflow: hidden;
		/* padding-bottom: 20rpx; */
		/* top: 0; */
		/* #ifdef H5 */
		/* top: 44px; */
		/* #endif */
		/* left: 0; */
		z-index: 99;
		background: #fff;
		white-space: nowrap;
	}

	.tab-bar-item {
		padding: 0 20rpx;
		height: 50upx;
		/* min-width: 80upx; */
		line-height: 52upx;
		margin-right: 24upx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 50rpx;
		border: solid 1rpx #efefef;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #333333;
	}

	.tab-view .tab-bar-item:first-child {
		margin-left: 24rpx;
	}

	.active {
		border: none;
		background-image: linear-gradient(90deg,
			#2cc0fe 0%,
			#0099ff 100%);
		color: #fff !important;
		font-weight: bold;
	}

	/*tabbar end*/
	.scoll-y {
		height: 100%;
	}

	/* 商品详情 */
	.product-item {
		width: 100%;
		height: 200rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 13, 22, 0.1);
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.product-item image {
		width: 200rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		align-self: center;
	}

	.product-item .p_left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.product-item .p_left>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.product-item .p_left>view:nth-child(2)>uni-tag {
		margin-right: 10rpx;
	}

	.product-item .p_left>view:nth-child(3) {
		display: flex;
		align-items: center;
		height: 40rpx;
	}

	.product-item .p_left>view:nth-child(3)>view:nth-child(1) {
		color: #666666;
		font-size: 24rpx;
		line-height: 34rpx;
	}

	.product-item .p_left>view:nth-child(3)>view:nth-child(2) {
		width: 1rpx;
		height: 20rpx;
		background: #efefef;
		border-radius: 5rpx;
		margin: 0 10rpx;
	}

	.product-item .p_left>view:nth-child(3)>view:nth-child(3) {
		font-size: 24rpx;
		color: #0099ff;
	}

	.product-item .p_right {
		/* width: 100rpx; */
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;

	}

	.product-item .p_right>view:nth-child(1) {
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.product-item .p_right>view:nth-child(2) {
		border-radius: 50rpx;
		text-align: center;
		width: 94rpx;
		height: 46rpx;
		line-height: 48rpx;
		color: #ffffff;
		font-size: 24rpx;
		background: rgb(243, 73, 48);
	}

	.look-all {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.look-all>view:nth-child(2) {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-right: 24rpx;
	}

	.other-all {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.other-all .other-item {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.other-all .other-item:last-child>view:nth-child(2) {
		border-bottom: 1rpx solid transparent;
	}

	.other-all .other-item>view {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.other-all .other-item>view:nth-child(1) {
		width: 135rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.other-all .other-item>view:nth-child(2) {
		flex: 1;
		border-bottom: solid 1rpx #efefef;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
	}

	.recommend {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.recommend .re-item {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 30rpx 0;
		border-bottom: solid 1rpx #efefef;
	}

	.recommend .re-item:last-child {
		border: none
	}

	.recommend .re-item:nth-child(1) {
		padding-top: 0
	}

	.recommend .re-item image {
		width: 220rpx;
		height: 160rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.recommend .re-item .r-right {
		flex: 1;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.recommend .re-item .r-right>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
	}

	.recommend .re-item .r-right>view:nth-child(2) {
		font-size: 26rpx;
		color: #999999;
	}

	.recommend .re-item .r-right>view:nth-child(3) {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.recommend .re-item .r-right>view:nth-child(3)>view:nth-child(1) {
		font-size: 28rpx;
	}

	.recommend .re-item .r-right>view:nth-child(3)>view:nth-child(2) {
		font-size: 28rpx;
		color: #666666;
	}

	/* 须知 */

	.notice-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.notice-content {
		z-index: 999;
		width: 100%;
		height: 70%;
		position: fixed;
		bottom: -70%;
		left: 0;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		transition: all 0.3s;
	}

	.notice-content .content {
		width: 100%;
		height: 100%;
		position: relative;
		padding: 40rpx 40rpx 100rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.notice-content .close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 35rpx;
		height: 35rpx;
		z-index: 9;
	}

	.tickets-msg {
		width: 100%;
		/* height: 170rpx; */
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx 23rpx;
		border-bottom: solid 1rpx #f2f2f2;
	}

	.tickets-msg image {
		width: 160rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.tickets-msg .msg {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tickets-msg .msg text:nth-child(1) {
		font-size: 28rpx;
		color: #333;
		max-width: 440rpx;
	}

	.tickets-msg .msg text:nth-child(2) {
		color: #999;
		font-size: 26rpx;
	}

	.tourism-in {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: solid 1rpx #f2f2f2;
	}

	.tourism-in .tick-tit {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.tourism-in .tourism-text {
		display: flex;
		margin-bottom: 10rpx;
	}

	.tourism-in .tourism-text .label {
		font-size: 26rpx;
		color: #999;
		width: 110rpx;
		margin-right: 20rpx;
	}

	.tourism-in .tourism-text .text {
		font-size: 26rpx;
		color: #666;
		flex: 1;
	}

	.tel-phone {
		display: flex;
		height: 70rpx;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tel-phone image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.tel-phone view {
		flex: 1;
	}

	.use-btn {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		border-top: solid 1rpx #f2f2f2;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.use-btn>view:nth-child(1) {
		color: #fd7023;
	}

	.use-btn>view:nth-child(1) text {
		font-size: 28rpx;
	}

	.use-btn>view:nth-child(2) {
		width: 180rpx;
		height: 50rpx;
		background-color: #fd7023;
		border-radius: 24px;
		text-align: center;
		line-height: 50rpx;
		color: #fff;
		font-size: 24rpx;
	}


	.navBack {
		color: #fff;
		border-radius: 100%;
		width: 45rpx;
		height: 45rpx;
		text-align: center;
		line-height: 43rpx
	}


	.concentration {
		width: 100%;
		margin: 0 0 20rpx;
		padding: 10rpx 0 0;
		background: #fff;
	}

	.concent-title {
		line-height: 68rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding: 0 24rpx;
	}

	.banner-content {
		background: #fff;
		/* padding: 20rpx 0; */
		box-sizing: border-box;
		position: relative;
	}

	.swiper-container {
		width: 100%;
		/* display: flex; */
		padding-right: 24rpx;
		white-space: nowrap;
	}

	.swiper-container .swiper-item {
		display: inline-block;
		width: 250rpx;
		height: 330rpx;
		position: relative;
		margin: 0 10rpx 0 0;
		border-radius: 8rpx;
	}

	.swiper-container .swiper-item:nth-child(1) {
		margin-left: 24rpx;
	}

	.swiper-container .swiper-item .coon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		box-sizing: border-box;
	}

	.swiper-container .swiper-item .coon image {
		width: 100%;
		height: 180rpx;
		border-radius: 8rpx;
		border: solid 1rpx #efefef;
		box-sizing: border-box;
	}

	.swiper-container .swiper-item .coon>view:nth-child(2) {
		font-size: 30rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 250rpx;
		margin: 10rpx 0 10rpx;
		text-align: center;
	}

	.swiper-container .swiper-item .coon>view:nth-child(3) {
		line-height: 30rpx;
		font-size: 26rpx;
		color: #f34930;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.swiper-container .swiper-item .coon>view:nth-child(4) {
		height: 40rpx;
		background-color: #f34930;
		box-shadow: 1rpx 2rpx 4rpx 0rpx rgba(153, 36, 19, 0.35);
		border-radius: 20rpx;
		line-height: 40rpx;
		color: #fff;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.h5-share {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 1027;
	}

	.h5-share image {
		width: 750rpx;
		height: 400rpx;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1028;
	}
</style>
<style>
	.tui-mtop {
		margin-top: 0 !important
	}
</style>
